<template>
	<a class="img" href="buyCar.html?type=buyCar"><img src="./img/left.png"></a>
	<div class="content">
		<!-- 姓名,收获地址 -->
		<div class="weui-cells nowrap">
            <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__bd">
                    <p>刘小新 &nbsp<span>13547454540</span></p>
                    <p><span class="orange">[默认]</span>广州市天河区</p>
                </div>
                <div class="weui-cell__ft">
                </div>
            </a>
        </div>
        <!-- 购买商品 -->
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>购买商品</p>
                </div>
            </div>
            <div class="weui-cell" class="list" v-for="obj in orderItem">
                <div class="weui-cell__bd clear">
                	<div class="pic fl"><img :src=obj[0].src></div>
                	<div class="font fl">
	                    <p>{{obj[0].title}}</p>
	                    <p>规格：{{obj[0].format}}</p>
	                    <p class="red">¥{{obj[0].price}}</p>                		
                	</div>
                </div>
                <div class="weui-cell__ft">X {{obj[0].num}}</div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>运费</p>
                </div>
                <div class="weui-cell__ft fare">¥ <span>12</span></div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>备注:</p>
                </div>
            </div>
        </div>
        <!-- 支付方式 -->
        <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>支付宝方式</p>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>支付宝</p>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>微信支付</p>
                </div>
            </div>
        </div>
        <!-- 合计 -->
        <div class="weui-cells bottom">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>合计:<span class="red">¥{{count}}</span></p>
                </div>
                <div class="weui-cell__ft">
                	<a href="###" class="pay">立即支付</a>
                </div>
            </div>
            <div class="add"></div>
        </div>    
	</div>
</template>
<script>
	export default{
		data(){
			return {
				orderItem:[],
				count:0     
			}
		},
		ready:function(){
			var _this = this;
			var str = location.search;
			var type = str.substr(1,10);
			var idStr = str.substr(16,str.length);
			var idArr = idStr.split(",");

			for (var i = 0;i < idArr.length;i++) {

				idArr[i] = 'id='+idArr[i];
				var url = "http://172.16.18.43/classfiy/data.php?cb=JSON_CALL&"+type+"&"+idArr[i];
				$.ajax({
					type:"GET",
					dataType:"jsonp",
					jsonp:"cb",
					url:url,
					success:function(data){
						_this.orderItem.push(data);
						_this.count += toNum(data[0]["price"]) * toNum(data[0]["num"]);
					}
				})
			}
			_this.count += toNum($(".fare span").text());//在加上运费		
		}
	}
	function toNum(element){
		return Number(element);
	}
</script>
<style>
	.img{
		width: 3%;
		position: fixed;
		left: 2%;
		top: 2%;
		z-index: 1020;
	}
	.img img{
		width: 100%;
	}
	.content{
		color: #333;
		background: #f2f2f2;
	}
	.content .nowrap{
		margin: 0;
	}
	.nowrap a.weui-cell.weui-cell_access{
		padding:5%;
	}
	.orange{
		color: #f29004;
	}
	.weui-cell__bd p{
		line-height: 0.3rem;
	}
	.red{
		color: #ee4147;
	}
	.bottom .weui-cell__ft a{
		padding: 2% 5%;
		color: white;
		background: #ee4147;
		border-radius: 3px;
		position: absolute;
		top: 13%;
		right: 4%;
	}
	.bottom{
		padding: 1% 0;
	}
	.bottom .weui-cell__ft{
		text-align: center;
	}
	.bottom .add{
		padding: 7%;
	}
	/*列表样式*/
	.pic{
		width: 35%!important;
	}
	.pic img{
		width: 100%;
	}
	.font{
		width: 50%!important;
		height: 50%!important;
		margin: 5% 2% 0 0;
	}
	.font p{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

	}

</style>